<template>
  <div class="admin-productlist-container">
    <el-main>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 搜索栏 -->
      <div class="search-option">
        <el-input
          class="search-input"
          size="medium"
          placeholder="请输入商品名称"
          v-model="title"
        ></el-input>
        <el-button type="primary" @click="load()" size="small"
          >查询 <i class="el-icon-search"></i
        ></el-button>
        <el-button type="info" @click="reset" size="small">重置</el-button>
      </div>

      <!-- 商品表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :span-method="spanMethod"
        :height="600"
        border
        show-header
      >
        <!-- 订单号（合并） -->
        <el-table-column
          label="订单号"
          prop="orderNumber"
          align="center"
          sortable
          width="180"
        />

        <el-table-column
          label="订单状态"
          prop="status"
          align="center"
          :width="120"
          :filters="statusFilters"
          :filter-method="filterStatus"
          filter-placement="bottom-end"
        >
          <template v-slot="{ row }">
            <el-tag
              :type="statusTagType(row.status)"
              disable-transitions
              effect="plain"
            >
              {{ statusTextMap[row.status] }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 商品ID -->
        <el-table-column
          label="商品ID"
          prop="productId"
          align="center"
          width="100"
          sortable
        />

        <!-- 商品名称 -->
        <el-table-column label="商品名称" prop="productName" width="140" />

        <!-- 商品图片 -->
        <el-table-column
          label="商品图片"
          prop="productImage"
          align="center"
          width="100"
        >
          <template #default="{ row }">
            <el-image
              :src="row.productImage"
              style="width: 60px; height: 60px"
              fit="cover"
            />
          </template>
        </el-table-column>

        <!-- 卖家ID -->
        <el-table-column
          label="卖家ID"
          prop="sellerId"
          align="center"
          sortable
          width="90"
        />

        <!-- 卖家名称 -->
        <el-table-column
          label="卖家名"
          prop="sellerName"
          width="100"
          sortable
        />

        <!-- 商品描述 -->
        <el-table-column label="描述" prop="productDescription" width="150" />

        <!-- 商品价格 -->
        <el-table-column
          label="价格"
          prop="price"
          align="center"
          width="80"
          sortable
        />

        <!-- 数量 -->
        <el-table-column
          label="数量"
          prop="quantity"
          align="center"
          width="80"
          sortable
        />

        <!-- 总价（合并） -->
        <el-table-column
          label="总价"
          prop="totalPrice"
          align="center"
          width="100"
          sortable
        />

        <!-- 地址（合并） -->
        <el-table-column
          label="收货地址"
          prop="address.fullAddress"
          width="240"
        >
          <template #default="{ row }">
            <div>
              <div>{{ row.address.recipient }} - {{ row.address.phone }}</div>
              <div>{{ row.address.fullAddress }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 创建时间（合并） -->
        <el-table-column
          label="下单时间"
          prop="createTime"
          align="center"
          width="160"
          sortable
        />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[5, 10, 20, 30]"
        layout="sizes,total, prev, pager, next"
        background
      />
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      page: 1,
      pageSize: 10,
      total: 0,
      currentGood: null,
      productList: [],
      remark: "",
      statusTextMap: {
        pending_payment: "待付款",
        pending_delivery: "待发货",
        pending_receipt: "待收货",
        completed: "已完成",
        canceled: "已取消",
      },
      // 用于表格列的筛选项
      statusFilters: [
        { text: "待付款", value: "pending_payment" },
        { text: "待发货", value: "pending_delivery" },
        { text: "待收货", value: "pending_receipt" },
        { text: "已完成", value: "completed" },
        { text: "已取消", value: "canceled" },
      ],
    };
  },
  computed: {
    tableData() {
      // 将订单拆平为每行一个商品，附带订单信息
      // return this.productList.flatMap((order) =>
      //   order.items.map((item, index) => ({
      //     ...item,
      //     orderId: order.orderId,
      //     status: order.status,
      //     orderNumber: order.orderNumber,
      //     totalPrice: order.totalPrice,
      //     createTime: order.createTime,
      //     address: order.address,
      //     _rowspan: order.items.length,
      //     _orderIndex: index,
      //   }))
      // );
      return this.productList.map((order) => ({
        ...order.items[0],
        orderId: order.orderId,
        status: order.status,
        orderNumber: order.orderNumber,
        totalPrice: order.totalPrice,
        createTime: order.createTime,
        address: order.address,
      }));
    },
  },

  created() {
    this.load();
  },
  methods: {
    filterStatus(value, row) {
      return row.status === value;
    },
    load() {
      this.$axios
        .get(
          `/orders/admin/${this.page}/${this.pageSize}?productName=${this.title}`
        )
        .then(
          (res) => {
            if (res && res.status === 200) {
              // console.log(res);
              let allList = res.data.data.records;
              this.productList = allList.slice(
                (this.page - 1) * this.pageSize,
                this.page * this.pageSize
              );
              this.total = allList.length;
            } else {
              this.$message.error(res.data.data);
            }
          },
          (err) => {
            this.$message.error(err || "获取商品信息失败");
          }
        );
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.load();
    },
    reset() {
      this.page = 1;
      this.pageSize = 10;
      this.title = "";
      this.load();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.load();
    },
    statusTagType(status) {
      switch (status) {
        case "pending_payment":
          return "info"; // 待付款，灰色
        case "pending_delivery":
          return "warning"; // 待发货，橙色
        case "pending_receipt":
          return "primary"; // 待收货，蓝色
        case "completed":
          return "success"; // 已完成，绿色
        case "canceled":
          return "danger"; // 已取消，红色
        default:
          return "";
      }
    },
    spanMethod({ row, column, rowIndex }) {
      // const mergeFields = [
      //   "orderNumber",
      //   "status",
      //   "totalPrice",
      //   "createTime",
      //   "address.fullAddress",
      // ];
      // if (mergeFields.includes(column.property)) {
      //   if (row._orderIndex === 0) {
      //     return {
      //       rowspan: row._rowspan,
      //       colspan: 1,
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0,
      //     };
      //   }
      // }
    },
  },
};
</script>

<style lang="scss">
.admin-productlist-container {
  min-height: 800px;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
}
</style>
